<template>
<div class="signin-container">
    <div id="form">
        <p style="font-size: 14px;">{{ message }}</p>
        <br>
        <br>
        <Input class="form-field" style="width: 250px;" clearable placeholder="ئەزالىق نامىڭىز" v-model="user.userName">
            <Icon slot="prepend" type="ios-contact" />
        </Input>
        <Input class="form-field" style="width: 250px;" clearable placeholder="پارولىڭىز" type="password" v-model="user.userPassword">
            <Icon slot="prepend" type="ios-lock-outline" />
        </Input>
        <Button @click="SignIn(user)" class="form-field" style="width: 100px; background-color: #3BA776; color: white;" :disabled="user.userPassword.length < 5 || user.userName == ''">كىرىش</Button>

    </div>
    <div id="form-logo">
        <img src="../../static/pictures/traffic-sign-1.svg" style="width: 150px;" id="logo">
    </div>
</div>
</template>

<style lang="scss" scoped>

$primary-color: #3BA776;

.signin-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    // background-color: red;
}



#form {
    width: 400px;
    height: 250px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: {
        style: solid;
        width: 1px;
        color: $primary-color;

        bottom: {
            right-radius: 70px;
        }
    }

    direction: ltr;

}

.form-field {
    margin: 10px;
}

p {
    color: $primary-color;
    text-shadow: 0px 0px 10px $primary-color;
}

#form-logo {
    width: 200px;
    height: 250px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: {
        style: solid;
        width: 1px;
        color: $primary-color;
    }

    background-color: $primary-color;
}

#logo:hover {
     transform: rotate(-20deg);
}
.ivu-icon {
    color: $primary-color;
}
</style>


<script>

import { mapActions } from "vuex"


export default {
    data(){
        return {
            user: {
                userName: "",
                userPassword: ""
            },
            message: "مەرھابا"
        }
    },

    methods: {
        ...mapActions({
            AccountSignIn: "Account/SignIn"
        }),
        async SignIn(user){
            try {
                let result = await this.AccountSignIn(user)
                this.$router.push({
                    name: "Search"
                })
            }
            catch (exception) {
                this.message = "ئەزالىق نامىڭىز ياكى پارولىڭىزدا خاتالىق بار"
            }
        }
    }
}
</script>
